<template>
  <div>
    <el-input v-model="prompt" placeholder="输入提示"></el-input>
    <el-button @click="generateResponse">生成响应</el-button>
    <div v-if="response" style="margin-top: 20px;">
      <p>响应内容：</p>
      <el-card>
        <p>{{ parsedResponse }}</p>
      </el-card>
    </div>
  </div>
</template>

<script>
import { generate } from "@/api/ad/helloVue";
export default {
  name: 'HelloVue',
  data() {
    return {
      prompt: '',
      response: null
    };
  },
  computed: {
    parsedResponse() {
      if (this.response) {
        const data = JSON.parse(this.response);
        return data.choices[0].message.content;
      }
      return null;
    }
  },
  methods: {
    generateResponse() {
      generate(this.prompt)
          .then(response => {
            this.response = JSON.stringify(response.data, null, 2);
          })
          .catch(error => {
            console.error('调用接口出错：', error);
          });
    }
  }
};
</script>